<template>
  <div v-if="value" class="bg-gray-50 rounded p-3 hover:bg-gray-100 transition-colors">
    <div class="text-xs text-gray-500" v-if="label">{{ label }}</div>
    <div class="text-sm font-medium text-gray-900 truncate">
      {{ value }} {{ unit }}
    </div>
    <div v-if="subtext" class="text-xs text-gray-500 mt-1">{{ subtext }}</div>
    <div v-if="inline" class="inline-flex items-center">
      <span class="text-gray-500 mr-2">{{ label }}:</span>
      <span class="text-gray-900">{{ value }}</span>
    </div>
  </div>
  <slot v-if="$slots.default"></slot>
</template>

<script>
export default {
  props: {
    label: String,
    value: [String, Number],
    subtext: String,
    inline: Boolean,
    unit: String,
  }
}
</script>